<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>

    .el-carousel__indicators--labels .el-carousel__button{
      width: 160px;height: 28px;
      padding: 0;
      margin: 0;
      color: black;
      background-color: #e8e8e8;
      font-size: 14px;
    }
    .el-carousel__indicators{
     text-align: left;
      background-color: #e8e8e8;
    }
    .el-tabs__item{
      padding: 0 30px;
      font-size: 18px;
    }
    .el-divider--horizontal{
      margin: 5px 0;
    }
    .p1{
      text-align: center;
      font-size: 18px;
      color: #0096dc;
      font-weight: bold;
    }
    .el-card__body{
      padding: 0;
    }
    .el-tabs__header{
      margin-bottom: 0;
    }
    a{
      text-decoration: none;
    }

  </style>
</head>
<body>
<div id="app" >
  <el-container>
    <el-header></el-header>
    <el-main>
      <div style="width: 1358px;height: 1071px;margin: 0 auto;padding: 40px 0 80px 0">

        <el-row gutter="20">
          <el-col span="15">
            <el-carousel arrow="never" indicator-position="outside" height="340px" >
              <el-carousel-item  :label="lol.title" v-for="lol in lol">
                <img :src="lol.url" width="100%" height="100%">
              </el-carousel-item>
            </el-carousel>
          </el-col>
         <el-col span="9">

           <el-tabs  style="" v-model="activeName2" @tab-click="handleClick">
             <el-tab-pane  label="综合" name="1">
               <h3 style="font-size: 22px;text-align: center;color: #0aa1ed;margin: 16px 0">活动预告：5·1全场半价，买皮肤抽免单</h3>
               <ul style="list-style-type: none;padding: 0;overflow: hidden">
                 <li style="padding: 12px 0;border-top: 1px solid #e0e2e2"  v-for="i in arr1">
                   <span style="width: 36px;height: 20px;border: 1px solid orange;
                   margin-right: 10px;font-size: 10px;color: orange">
                     视频</span>{{i}}</li>
               </ul>
             </el-tab-pane>
             <el-tab-pane label="公告" name="2">
               <h3 style="font-size: 22px;text-align: center;color: #0aa1ed;margin: 16px 0">TOC5云顶之巅服务器说明公告</h3>
               <ul style="list-style-type: none;padding: 0;overflow: hidden">
                 <li style="padding: 12px 0;border-top: 1px solid #e0e2e2"  v-for="i in arr2">
                   <span style="width: 36px;height: 20px;border: 1px solid brown;
                   margin-right: 10px;font-size: 10px;color: brown">
                     公告</span>{{i}}</li>
               </ul>
             </el-tab-pane>
             <el-tab-pane label="赛事" name="3">
               <h3 style="font-size: 22px;text-align: center;color: #0aa1ed;margin: 16px 0">2023LPL春季赛总决赛宣传片：见证新十年首冠</h3>
               <ul style="list-style-type: none;padding: 0;overflow: hidden">
                 <li style="padding: 12px 0;border-top: 1px solid #e0e2e2"  v-for="i in arr3">
                   <span style="width: 36px;height: 20px;border: 1px solid #0a7eb8;
                   margin-right: 10px;font-size: 10px;color: #0a7eb8">
                     赛事</span>{{i}}</li>
               </ul>
           </el-tab-pane>
             <el-tab-pane label="攻略" name="4">
               <h3 style="font-size: 22px;text-align: center;color: #0aa1ed;margin: 16px 0">【乱斗研究所】大乱斗蓝量管理</h3>
               <ul style="list-style-type: none;padding: 0;overflow: hidden">
                 <li style="padding: 12px 0;border-top: 1px solid #e0e2e2"  v-for="i in arr4">
                   <span style="width: 36px;height: 20px;border: 1px solid lawngreen;
                   margin-right: 10px;font-size: 10px;color: lawngreen">
                     教学</span>{{i}}</li>
               </ul>
           </el-tab-pane>
             <el-tab-pane label="社区" name="5">
               <h3 style="font-size: 22px;text-align: center;color: #0aa1ed;margin: 16px 0">注意看这个盲僧【LOL动画】</h3>
               <ul style="list-style-type: none;padding: 0;overflow: hidden">
                 <li style="padding: 12px 0;border-top: 1px solid #e0e2e2"  v-for="i in arr5">
                   <span style="width: 36px;height: 20px;border: 1px solid aqua;
                   margin-right: 10px;font-size: 10px;color: aqua">
                     娱乐</span>{{i}}</li>
               </ul>
           </el-tab-pane>
           </el-tabs>
         </el-col>
        </el-row>

        <el-row gutter="20" style="margin-top: 50px">
            <el-col span="15">
              <el-tabs  v-model="activeName" @tab-click="handleClick">

                <el-tab-pane label="正在进行" name="first">
                  <el-col span="6" v-for="first in first">
                  <el-card >
                    <img :src="first.url" width="100%" height="100%">
                    <p style="font-size: 14px;padding:6px 10px 4px 10px ">{{first.title}}</p>
                    <p style="font-size: 14px;color: #0aa1ed;padding:6px 10px 4px 10px ">{{first.end}}</p>
                  </el-card>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="商城特惠" name="second">
                  <el-col span="6" v-for="second in second">
                    <el-card >
                      <img :src="second.url" width="100%" height="100%">
                      <p style="font-size: 14px;padding:6px 10px 4px 10px ">{{second.title}}</p>
                      <p style="font-size: 14px;padding:6px 10px 4px 10px;;color: #0aa1ed">{{second.end}}</p>
                    </el-card>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="长期活动" name="third">
                  <el-col span="6" v-for="third in third">
                    <el-card >
                      <img :src="third.url" width="100%" height="100%">
                      <p style="font-size: 14px;padding:6px 10px 4px 10px ">{{third.title}}</p>
                      <p style="font-size: 14px;padding:6px 10px 4px 10px;;color: #0aa1ed">{{third.end}}</p>
                    </el-card>
                  </el-col>
                </el-tab-pane>
              </el-tabs>
            </el-col>
            <el-col span="9">

            </el-col>
          </el-row>

        <el-row gutter="20">
          <el-col span="15">
            <el-col span="12">
              <div style="position: relative;height: 254px;background-image: url('img/lol19.jpg')">
                <p style="width: 60px;height :20px;background-color: black;color: gold;
                font-size: 12px;text-align: center;line-height:20px;position: relative;left: 5px;top: 5px">英雄更新</p>
                <p style="width:100%;font-weight:bold;padding: 0 17px;position: absolute;bottom: 15px;left: 0;
                font-size: 16px;color: #efd46c">明烛 米利欧专题站</p>
                <p style="width:100%;padding: 0 17px;position: absolute;bottom: 1px;left: 0;
                font-size: 14px;color:#efefef">全新护阵法师英雄上线!</p>
              </div>
            </el-col>
            <el-col span="12">
              <div style="position: relative;height: 254px;background-image: url('img/lol18.jpg')">
                <p style="width: 48px;height :20px;background-color: black;color: gold;
                font-size: 12px;text-align: center;line-height:20px;position: relative;left: 5px;top: 5px">新皮肤</p>
                <p style="width:100%;font-weight:bold;padding: 0 17px;position: absolute;bottom: 15px;left: 0;
                font-size: 16px;color: #efd46c">猫狗大战2023</p>
                <p style="width:100%;padding: 0 17px;position: absolute;bottom: 1px;left: 0;
                font-size: 14px;color:#efefef">谁说，猫狗不能做朋友？全新皮肤上线召唤师峡谷!</p>
              </div>
            </el-col>
          </el-col>
          <el-col span="9">
            <div>
              <el-col span="12">
                <div style="background-image: url('img/lol20.jpg');height: 120px;margin: 12px 0"></div>
                <div style="background-image: url('img/lol21.jpg');height: 120px"></div>
              </el-col>
              <el-col span="12" style="text-align: center;line-height: 58px">
                <div style="background-image: url('img/lol22.jpg');height: 180px;margin:  12px 0"></div>
                <a href="">
                  <div style="width: 228px;height: 58px;background-image: url('img/a.png');color: #fff">周免</div>
                </a>
              </el-col>
            </div>
          </el-col>
        </el-row>

      </div>

    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        activeName: 'first',
        activeName2:'1',
        lol:[{url:"./img/lol5.jpg",title:"全场! 传说! 半价!"},{url:"./img/lol1.jpg",title:"猫狗宝箱"},
          {url:"./img/lol3.jpg",title:"猫狗大战"},{url:"./img/lol2.jpg",title:"命定召唤"},
          {url:"./img/lol4.jpg",title:"花仙子通行证"}
          ],
        arr1:["虎将杯S3总决赛来袭!谁能拿下冠军，进军TOC5半决赛?","游戏玩法感想：13.7版本","【英雄联盟】猫狗大战2023炫彩皮肤展示",
          "什么？EDG.NICE变成猫了！电竞萌宠上演实力COS秀","谁说猫狗不能做朋友？猫狗大战2023正式上线！","猫狗大战2023系列皮肤即将上线"],
        arr2:["4月14日周免英雄更新公告","2023年4月10日 不停机更新公告","2023年4月7日 不停机更新公告","猫狗大战2023系列皮肤即将上线",
          "13.7版本更新公告：打野英雄平衡性调整， 猫狗大战. . .","13.7云顶之弈版本更新公告"],
        arr3:["明星召唤师祝福LPL十周年","2023LPL春季赛总决赛，JDG vs BLG","2023LPL春季赛总决赛预热：见证.荣耀","LPL十周年经典垃圾话",
          "2023LPL春季赛总决赛预热：听见.声音","LPL十周年纪念颁奖典礼将于4月15日14:30举行"],
        arr4:["上单男枪重出江湖？介绍一下现在的上单男枪打法","【小宇】非娱乐！教你AD妖姬上王者！","一分钟提高乱斗水平之 雪球小技巧(2)",
          "一分钟提高乱斗水平之 雪球小技巧(1)","峡谷拆迁办！暴力强拆上分！","版本答案墨菲特：上路唯一指定真神！隐藏机制WR与. . ."],
        arr5:["【杂谈】石头人模型怪在哪？","英雄联盟背景故事中，有哪个英雄的背景故事是悲剧的","执事与地下都市系列：商业与黑道的交锋中，暗含着",
          "联盟漫画：卡特盖伦首次见面！","猫狗大战皮肤背景：谁会拒绝可爱的猫猫狗狗呢？","【同人】猫狗大战皮肤Q版涂鸦"],
        first:[{url:"./img/lol6.webp",title:"全场！ 传说！ 半价！",end:"12天后结束"},
          {url:"./img/lol7.jpg",title:"猫狗宝箱",end:"14天后结束"},
          {url:"./img/lol8.webp",title:"猫狗大战2023",end:"18天后结束"},
          {url:"./img/lol9.webp",title:"神话级小小英雄劫登场",end:"60天后结束"}],
        second:[{url:"./img/lol10.webp",title:"娑娜雕塑 开启限时预售！",end:"60天后结束"},
          {url:"./img/lol11.webp",title:"灵罗娃娃格温雕塑 预售开启",end:"40天后结束"},
          {url:"./img/lol12.webp",title:"卢锡安雕塑 现货限量抢购！",end:"35天后结束"},
          {url:"./img/lol13.webp",title:"春日福利倒计时！",end:"已结束"}],
        third:[{url:"./img/lol14.webp",title:"瑞兹的英雄学院现已上线",end:"长期活动"},
          {url:"./img/lol15.jpg",title:"8.5新赛季大礼包",end:"长期活动"},
          {url:"./img/lol16.jpg",title:"铲铲市危机 云顶宝典",end:"长期活动"},
          {url:"./img/lol17.webp",title:"8.5新赛季大礼包",end:"长期活动"}]
      }
    },
   methods:{
     handleClick(tab, event) {
       console.log(tab, event);
     }
   }
  })
</script>
</html>